<!doctype html>
<html lang="zh-ch">
<head>
    <title>用户登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/css/login.css?version={$version}">
    <script src="/static/jquery/jquery.min.js"></script>
    <script src='/static/layui/layui.js'></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <link rel="styleSheet" href="/static/layui/css/layui.css">
</head>
<body>
<img src="/static/images/leftLogin.png" id="leftBg" alt=""/>
<section id="Card">
    <img src="/static/images/card.png" alt="login" id="cardLogin">
    <div class="login-wrap p-0">
        <div class="login-item">
            <div style="font-size: 20px;text-align: center;font-weight: bold">登录</div>
            {if $getConfig('register')==1}
            <div class="loginType">
                <div class="toggle-password fa-eye" data-type="authCode">验证码登录</div>
                <div class="toggle-password" data-type="pass">账号密码登录</div>
            </div>
            {/if}
            <div class="form">
                <label>
                    <span>账号</span>
                    <input name="user" type="text" placeholder="手机/邮箱">
                </label>
                <label id="pass" style="{if $getConfig('register')==1}display: none{/if}"  >
                <span>密码</span>
                <input name="password" type="password" placeholder="请输入密码">
                </label>
                {if $getConfig('register')==1}
                <label id="authCode">
                    <span>验证码</span>
                    <input name="code" style="width: 130px" type="text" placeholder="请输入验证码">
                    <button class="getCode">获取验证码</button>
                </label>
                {/if}
            </div>
            {if $getConfig('register')==1}
            <div style="margin-top: 10px;font-size: 12px;">
                <b style="color: red">*</b>未注册账号首次验证码登录即为新账号！
            </div>
            {/if}
            <div style="margin-top: 10px;font-size: 12px;">
                <label style="display: flex;align-items: center">
                    <input type="checkbox" name="xy" style="margin-top: 2px">
                    <span style="margin-left: 5px;">
                        我已阅读并接受
                        <a target="_blank" style="color:#4b9fff;" href="/index/index/UserAgreement">《用户隐私协议》</a>
                    </span>
                </label>
            </div>
            <div style="margin-top: 30px">
                <button class="loginBtn">立即登录</button>
            </div>
        </div>
    </div>
</section>
<script>
    let loginType = "{if $getConfig('register')==1}authCode{else}pass{/if}";
    $(".toggle-password").click(function () {
        $(".toggle-password").removeClass("fa-eye");
        $(this).addClass("fa-eye");
        loginType = $(this).attr("data-type");
        if (loginType === 'authCode') {
            $("#authCode").show();
            $("#pass").hide();
        } else {
            $("#pass").show();
            $("#authCode").hide();
        }
    });
    $(".loginBtn").click(function () {
        if (!$("[name='xy']").prop('checked')) {
            return layer.msg("请阅读并选择用户隐私协议！");
        }
        const password = $("[name='password']").val();
        const user = $("[name='user']").val();
        const code = $("[name='code']").val();
        $(this).attr("disabled", true)
        $.ajax({
            url: '/index/user/login',
            type: 'post',
            data: {
                password: password,
                user: user,
                code: code,
                type: loginType
            },
            success: res => {
                if (res.code === 1) {
                    $.cookie("UserId", res.data.UserId, {
                        path: '/',
                        expires: 7,
                    });
                    $.cookie("UserToken", res.data.UserToken, {
                        path: '/',
                        expires: 7,
                    })
                    setTimeout(() => {
                        location.href = "/index/manager/index";
                    }, 100)
                } else {
                    layer.msg(res.msg);
                }
                $(this).attr("disabled", false)
            }
        })
    })
</script>
{if $getConfig('register')==1}
<script>
    let i = 60;
    $(".getCode").click(function () {
        const user = $("[name='user']").val();
        if (!user && user.trim().length === 0) {
            return layer.msg("请输入手机号码或邮箱地址")
        }
        if (i !== 60) {
            return;
        }
        $(this).attr("disabled", true)
        let tm = setInterval(() => {
            if (i <= 0) {
                i = 60;
                $(this).attr("disabled", false)
                $(this).text('获取验证码')
                clearInterval(tm);
                return;
            }
            $(this).text(i + 's')
            i -= 1;
        }, 1000)

        $.ajax({
            url: '/index/sms/send',
            type: 'post',
            data: {
                phone: user,
            },
            success: res => {
                layer.msg(res.msg)
            }
        })
    })
</script>
{/if}
</body>
</html>
